<!--
 * @Author: your name
 * @Date: 2021-07-08 12:46:10
 * @LastEditTime: 2021-12-16 16:23:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\systemSetting\column.vue
-->
<template>
    <div class="all">
        <div class="container">
            <div class="containerTop">
                <div class="containerTopName">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">流程节点</div>
                        </el-col>
                        <el-col :span="14">
                            <div class="grid-content bg-purple">处理阶段名称</div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <!-- <DataRefresh class="dataStatisticsButton" /> -->
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="addData">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <el-input
                                    v-model="stageInput"
                                    :disabled="isInput"
                                    placeholder="请输入内容"
                                ></el-input>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div class="grid-content bg-purple">
                                <el-input
                                    v-model="nameInput"
                                    :disabled="isInput"
                                    placeholder="请输入内容"
                                    class="maxInput"
                                ></el-input>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div v-if="isEidt">
                                    <el-button
                                        type="primary"
                                        @click.stop="setEidtFalse"
                                        class="buttonStyle"
                                        >编辑</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        @click.stop="insertAsyn"
                                        class="buttonStyle"
                                        >添加</el-button
                                    >
                                </div>
                                <div v-else>
                                    <el-button
                                        type="primary"
                                        @click.stop="setEidtTrue"
                                        class="buttonStyle"
                                        >保存</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        @click.stop="cancelAsyn"
                                        class="buttonStyle"
                                        >取消</el-button
                                    >
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-collapse>
                        <el-collapse-item>
                            <template slot="title">
                                排序说明
                                <i class="header-icon el-icon-info"></i>
                            </template>
                            <div>
                                排序规则为正序，建议不要重复，默认新建的阶段排序数值为0，建议新建完修改<br />
                                注：如遇到重复则会在更新进度中出现两个随机排序在一起的处理阶段名称
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            <div class="containerBottom">
                <div
                    v-for="(list, index) in getListAsync"
                    :key="index"
                    class="containerList"
                >
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-input
                                placeholder="请输入内容"
                                v-model="list.name"
                                :disabled="isEidt"
                                @change="changeData(list)"
                            ></el-input>
                            <span
                                v-if="list.id === '1425006541198667777'"
                                class="typetips"
                            >
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="是：触发现场回退到研发处理次数<br>否：不触发回退到研发处理次数"
                                    placement="top"
                                >
                                    <div slot="content">
                                        是：触发现场回退到研发处理次数<br />否：不触发现场回退到研发处理次数
                                    </div>
                                    <span
                                        class="el-icon-question"
                                    ></span></el-tooltip
                            ></span>
                        </el-col>
                        <el-col :span="19">
                            <div
                                class="containerListChildernOne"
                                v-if="
                                    list.id === '1425006410596429826' ||
                                    list.id === '1423154037582327809'
                                "
                            >
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="9"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    处理阶段名称
                                                </div></el-col
                                            >
                                            <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    阶段超期天数
                                                </div></el-col
                                            >
                                            <el-col :span="7"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    阶段超期规则
                                                </div></el-col
                                            >
                                            <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="1"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(item2, index2) in list.children"
                                        :key="index2"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="9"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            class="inputNewTag"
                                                            v-model="item2.name"
                                                            :disabled="isEidt"
                                                            @change="
                                                                changeDatas(
                                                                    item2,
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            class="inputNewTag"
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            v-model="
                                                                item2.areDaysOverdue
                                                            "
                                                            :disabled="isEidt"
                                                            @change="
                                                                changeDatas(
                                                                    item2,
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="7"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-radio-group
                                                            v-model="
                                                                item2.workDayTag
                                                            "
                                                            :disabled="isEidt"
                                                            @change="
                                                                isRadio(item2)
                                                            "
                                                        >
                                                            <el-radio
                                                                :label="false"
                                                                style="
                                                                    margin-left: 10px;
                                                                "
                                                                >天数</el-radio
                                                            >
                                                            <el-radio
                                                                :label="true"
                                                                >工作日</el-radio
                                                            >
                                                        </el-radio-group>
                                                    </div></el-col
                                                >
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            class="inputNewTag"
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            v-model="
                                                                item2.orderByNum
                                                            "
                                                            :disabled="isEidt"
                                                            @change="
                                                                changeDatas(
                                                                    item2,
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="1"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            v-if="
                                                                item2.name ===
                                                                '排查复现'
                                                            "
                                                            class="mark"
                                                        ></span>
                                                        <span
                                                            v-if="
                                                                isEidt ===
                                                                    false &&
                                                                item2.id !=
                                                                    '1423154037607493634' &&
                                                                item2.id !=
                                                                    '1423154076169924610' &&
                                                                item2.id !=
                                                                    '1425006410613207042' &&
                                                                item2.id !=
                                                                    '1425006439339995137' &&
                                                                item2.id !=
                                                                    '1425006465126576129' &&
                                                                item2.id !=
                                                                    '1425006489088634881' &&
                                                                item2.id !=
                                                                    '1425006541207056386' &&
                                                                item2.id !=
                                                                    '1425006561830449153' &&
                                                                item2.id !=
                                                                    '1425006585087864834' &&
                                                                item2.id !=
                                                                    '1423154128091213825' &&
                                                                item2.id !=
                                                                    '1455008058845532161'
                                                            "
                                                            class="
                                                                marks
                                                                el-icon-circle-close
                                                            "
                                                            @click="
                                                                deleteData(
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                v-else-if="list.id === '1425006541198667777'"
                                class="containerListChildernTwo"
                            >
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="8"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    处理阶段名称
                                                </div></el-col
                                            >
                                            <el-col :span="2"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    阶段超期天数
                                                </div></el-col
                                            >
                                            <el-col :span="6"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    阶段超期规则
                                                </div></el-col
                                            >
                                            <el-col :span="2"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    触发回退
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="1"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(item2, index2) in list.children"
                                        :key="index2"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="8"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            class="inputNewTag"
                                                            v-model="item2.name"
                                                            :disabled="isEidt"
                                                            @change="
                                                                changeDatas(
                                                                    item2,
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="2"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            class="inputNewTag"
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            v-model="
                                                                item2.areDaysOverdue
                                                            "
                                                            :disabled="isEidt"
                                                            @change="
                                                                changeDatas(
                                                                    item2,
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="6"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-radio-group
                                                            v-model="
                                                                item2.workDayTag
                                                            "
                                                            :disabled="isEidt"
                                                            @change="
                                                                isRadio(item2)
                                                            "
                                                        >
                                                            <el-radio
                                                                :label="false"
                                                                style="
                                                                    margin-left: 10px;
                                                                "
                                                                >天数</el-radio
                                                            >
                                                            <el-radio
                                                                :label="true"
                                                                >工作日</el-radio
                                                            >
                                                        </el-radio-group>
                                                    </div></el-col
                                                >
                                                <el-col :span="2"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <div>
                                                            <el-input
                                                                class="
                                                                    inputNewTag
                                                                "
                                                                oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                                v-model="
                                                                    item2.orderByNum
                                                                "
                                                                :disabled="
                                                                    isEidt
                                                                "
                                                                @change="
                                                                    changeDatas(
                                                                        item2,
                                                                        index,
                                                                        index2
                                                                    )
                                                                "
                                                            ></el-input>
                                                        </div></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <div>
                                                            <el-radio-group
                                                                v-model="
                                                                    item2.rollBackTag
                                                                "
                                                                :disabled="
                                                                    isEidt
                                                                "
                                                                @change="
                                                                    isRadio(
                                                                        item2
                                                                    )
                                                                "
                                                            >
                                                                <el-radio
                                                                    :label="
                                                                        false
                                                                    "
                                                                    style="
                                                                        margin-left: 10px;
                                                                    "
                                                                    >否</el-radio
                                                                >
                                                                <el-radio
                                                                    :label="
                                                                        true
                                                                    "
                                                                    >是</el-radio
                                                                >
                                                            </el-radio-group>
                                                        </div>
                                                    </div></el-col
                                                >
                                                <el-col :span="1"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            v-if="
                                                                item2.name ===
                                                                '排查复现'
                                                            "
                                                            class="mark"
                                                        ></span>
                                                        <span
                                                            v-if="
                                                                isEidt ===
                                                                    false &&
                                                                item2.id !=
                                                                    '1423154037607493634' &&
                                                                item2.id !=
                                                                    '1423154076169924610' &&
                                                                item2.id !=
                                                                    '1425006410613207042' &&
                                                                item2.id !=
                                                                    '1425006439339995137' &&
                                                                item2.id !=
                                                                    '1425006465126576129' &&
                                                                item2.id !=
                                                                    '1425006489088634881' &&
                                                                item2.id !=
                                                                    '1425006541207056386' &&
                                                                item2.id !=
                                                                    '1425006561830449153' &&
                                                                item2.id !=
                                                                    '1425006585087864834' &&
                                                                item2.id !=
                                                                    '1423154128091213825' &&
                                                                item2.id !=
                                                                    '1455008058845532161'
                                                            "
                                                            class="
                                                                marks
                                                                el-icon-circle-close
                                                            "
                                                            @click="
                                                                deleteData(
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="containerListChildernFour">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    处理阶段名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(item2, index2) in list.children"
                                        :key="index2"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            class="inputNewTag"
                                                            v-model="item2.name"
                                                            :disabled="isEidt"
                                                            @change="
                                                                changeDatas(
                                                                    item2,
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            class="inputNewTag"
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            v-model="
                                                                item2.orderByNum
                                                            "
                                                            :disabled="isEidt"
                                                            @change="
                                                                changeDatas(
                                                                    item2,
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            v-if="
                                                                item2.name ===
                                                                '排查复现'
                                                            "
                                                            class="mark"
                                                        ></span>
                                                        <span
                                                            v-if="
                                                                isEidt ===
                                                                    false &&
                                                                item2.id !=
                                                                    '1423154037607493634' &&
                                                                item2.id !=
                                                                    '1423154076169924610' &&
                                                                item2.id !=
                                                                    '1425006410613207042' &&
                                                                item2.id !=
                                                                    '1425006439339995137' &&
                                                                item2.id !=
                                                                    '1425006465126576129' &&
                                                                item2.id !=
                                                                    '1425006489088634881' &&
                                                                item2.id !=
                                                                    '1425006541207056386' &&
                                                                item2.id !=
                                                                    '1425006561830449153' &&
                                                                item2.id !=
                                                                    '1425006585087864834' &&
                                                                item2.id !=
                                                                    '1423154128091213825' &&
                                                                item2.id !=
                                                                    '1455008058845532161'
                                                            "
                                                            class="
                                                                marks
                                                                el-icon-circle-close
                                                            "
                                                            @click="
                                                                deleteData(
                                                                    index,
                                                                    index2
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <CommonDialog ref="CommonDialog" />
    </div>
</template>

<script>
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { Stage } from '@/api/setting/service.js'
// import DataRefresh from './dataRefresh.vue'
export default {
    name: 'column',
    components: {
        CommonDialog
    },
    data() {
        return {
            // 从后端获取的所有阶段数据信息
            getListAsync: [],
            isInput: false,
            // 阶段状态
            stageInput: '',
            // 处理阶段名称
            nameInput: '',
            activeNames: [],
            // 判断是否属于编辑状态
            isEidt: true,
            // 编辑修改的数据
            insertList: {
                deleteStages: [],
                updateStages: []
            },
            isFix: false,
            // 删除按钮弹出框
            modalType: {
                delete: {
                    type: 'delete',
                    tipInfo: '确定要删除该条数据吗？',
                    btnText: '删除',
                    callBack: 'dellist'
                }
            }
        }
    },
    mounted() {
        this.getCategory()
    },
    methods: {
        handleChange(val) {
            console.log(val)
        },
        /**
         * @description: 删除某一条数据的弹出框
         * @param {Number} index 删除数据的索引值
         * @param {Array} _modalInfo 删除弹出框的文字信息和确认按钮调用的事件
         */
        onActionConfirm(index, _modalInfo) {
            this.$refs.CommonDialog.Show(_modalInfo.type, _modalInfo.tipInfo, _modalInfo.btnText, () => {
                this.$refs.CommonDialog.OnHandleCancel()
                this[_modalInfo.callBack](index)
            })
        },
        cancelAsyn() {
            this.isEidt = true
            this.isInput = false
            this.isFix = false
            this.getCategory()
        },

        /**
     * @description: 二次确认删除数据
     * @param {Number} index 索引
     */
        dellist(index) {
            const item = this.getListAsync[index]
            this.insertList.deleteStages.push({
                id: item.id,
                name: item.name
            })
            this.getListAsync.splice(index, 1)
        },

        /**
     * @description:点击保存按钮
     */
        async setEidtTrue() {
            if (this.isFix) {
                this.getCategory()
                this.isInput = false
                this.isEidt = true
                this.isFix = false
                this.insertList.deleteStages = []
                this.insertList.updateStages = []
                this.$message.error('名字不能重复')
                // this.getCategory()
            } else {
                try {
                    const result = await Stage.StageSaveAsync(this.insertList)
                    if (result.success) {
                        this.getCategory()
                        this.isEidt = true
                        this.isInput = false
                        this.isFix = false
                        this.insertList.deleteStages = []
                        this.insertList.updateStages = []
                        this.$message.success(result.message)
                    } else {
                        this.getCategory()
                        this.isInput = false
                        this.isEidt = true
                        this.isFix = false
                        this.insertList.deleteStages = []
                        this.insertList.updateStages = []
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.isEidt = true
                    this.$message.error('服务器异常')
                }
            }
        },

        /**
     * @description: 删除数据
     * @param {Number} index 索引值
     * @param {Number} index2 索引值
     */
        deleteData(index, index2) {
            // console.log(index, index2)
            // console.log(this.getListAsync[index].children.length)
            if (this.getListAsync[index].children.length > 1) {
                const item = this.getListAsync[index].children[index2]
                this.insertList.deleteStages.push({
                    id: item.id,
                    name: item.name
                })
                this.getListAsync[index].children.splice(index2, 1)
            } else {
                this.onActionConfirm(index, this.modalType.delete)
            }
        },

        /**
     * @description:点击保存按钮
     */
        setEidtFalse() {
            this.isEidt = false
            this.isInput = true
        },

        /**
     * @description:异步获取所有阶段信息
     */
        async getCategory() {
            try {
                const result = await Stage.StageGetListAsync()
                if (result.success) {
                    this.getListAsync = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                console.log(err)
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description:修改某一条数据
     * @param {Object}item 你要修改的那一条数据
     */
        async changeData(item) {
            this.insertList.updateStages.push({
                id: item.id,
                name: item.name
            })
        },
        /**
     * @description:修改某一条数据
     * @param {Object}item 你要修改的那一条数据
     */
        async changeDatas(item, index, index2) {
            this.insertList.updateStages.push({
                id: item.id,
                name: item.name,
                rollBackTag: item.rollBackTag,
                areDaysOverdue: item.areDaysOverdue,
                orderByNum: item.orderByNum,
                workDayTag: item.workDayTag
            })
            const arrs = this.getListAsync[index].children
            const arr = JSON.parse(JSON.stringify(arrs))
            arr.splice(index2, 1)
            console.log(arr)
            for (let i = 0; i < arr.length; i++) {
                const name = arr[i].name
                if (name === item.name) {
                    console.log(name === item.name)
                    this.isFix = true
                }
            }
        },
        isRadio(val) {
            console.log(val)
            this.insertList.updateStages.push({
                id: val.id,
                name: val.name,
                rollBackTag: val.rollBackTag,
                areDaysOverdue: val.areDaysOverdue,
                orderByNum: val.orderByNum,
                workDayTag: val.workDayTag
            })
        },

        /**
     * @description:异步添加阶段信息
     */
        async insertAsyn() {
            if (this.stageInput != '' && this.nameInput != '') {
                const arr = {
                    stageStatus: {
                        name: this.stageInput,
                        stageType: 0
                    },
                    stageName: {
                        name: this.nameInput,
                        stageType: 1
                    }
                }
                try {
                    const result = await Stage.StageInsertAsync(arr)
                    if (result.success) {
                        this.getCategory()
                        this.stageInput = ''
                        this.nameInput = ''
                        this.$message.success(result.message)
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            } else {
                this.$message.error('未填写完整')
            }
        }
    }
}
</script>
<style lang="less" scoped>
.container {
    // height: 813px;
    margin: 31px;
    background: #ffffff;
    border: 1px solid #dcdfe4;
    box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
    border-radius: 5px;
    padding: 30px;
}
.dataStatisticsButton {
    float: right;
    margin-right: 10px;
}
.el-input {
    width: 60%;
}
.el-col-8 {
    overflow-x: auto;
}
.containerTop {
    padding: 10px 30px;
    position: sticky;
    background-color: #ffffff;
    border-bottom: 1px solid #c8cdd5;
    z-index: 1;
    top: 0;
    .containerTopName {
        height: 40px;
        border-bottom: 1px solid #c8cdd5;
    }
    .addData {
        width: 100%;
        line-height: 50px;
        padding: 10px 0;
    }
}
.containerBottom {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    .containerList {
        height: 230px;
        line-height: 30px;
        padding: 10px 30px;
        position: relative;
        border-bottom: 1px solid #c8cdd5;
        .containerListChildernThree {
            border: 1px solid rgb(228, 228, 228);
            width: 100%;
            max-width: 440px;
        }
        .containerListChildernFour {
            border: 1px solid rgb(228, 228, 228);
            width: 100%;
            max-width: 440px;
        }
        .containerListChildern {
            height: 160px;
            overflow-y: auto;
            padding: 10px 5px;
        }
        .childernDivs {
            height: 30px;
            overflow: hidden;
            text-align: center;
            padding: 10px 5px;
            font-size: 10px;
        }
        .containerListChildernTwo {
            border: 1px solid rgb(228, 228, 228);
            width: 100%;
            max-width: 760px;
        }
        .containerListChildernOne {
            width: 100%;
            max-width: 680px;
            border: 1px solid rgb(228, 228, 228);
        }
        .containerListChilderns {
            overflow-y: auto;
            width: 100%;
            max-width: 450px;
            border: 1px solid rgb(228, 228, 228);
            height: 160px;
            padding: 10px 5px;
        }
        .childernDiv {
            width: 100%;
            height: 45px;
            .inputNewTag {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 10px;
            }
            .spans {
                width: 15px;
                .mark {
                    width: 11px;
                    height: 11px;
                    display: inline-block;
                    background: #e4e7ed;
                    margin-top: 10px;
                    border-radius: 50%;
                    position: relative;
                }
                .marks:hover {
                    cursor: pointer;
                }
            }
        }
    }
}
.buttonStyle {
    width: 70px;
    height: 30px;
    background: #eaf2ff;
    border: 1px solid #3579e0;
    border-radius: 5px;
    color: #3579e0;
    line-height: 8px;
    z-index: 999;
}
.el-button {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}
.maxInput {
    max-width: 320px;
}
.typetips {
    margin-left: 5px;
    cursor: pointer;
    color: #6bb6f3;
}
.el-icon-circle-close {
    color: #f56c6c;
}
.el-icon-circle-close:hover {
    color: #a30d0d;
}
</style>
